import { Button, BUTTON_VARIANTS, COLORS } from "@design-system/widgets";
import { Canvas, Meta, Story, ArgsTable } from "@storybook/blocks";
import EmotionHappyLineIcon from "remixicon-react/EmotionHappyLineIcon";

<Meta
  title="Design-system/Widgets/Button"
  component={Button}
  args={{
    children: "Button",
  }}
/>

export const Template = (args) => <Button {...args} />;

# Button

A button is a clickable element that is used to trigger an action.

<Canvas>
  <Story name="Button">{Template.bind({})}</Story>
</Canvas>

<ArgsTable story="Button" of={Button} />

## Variants

There are 3 variants of the button component.

<Story
  name="Filled"
  args={{
    children: "Filled",
  }}
>
  {Template.bind({})}
</Story>

<Story
  name="Outlined"
  args={{
    variant: "outlined",
    children: "Outlined",
  }}
>
  {Template.bind({})}
</Story>

<Story
  name="Ghost"
  args={{
    variant: "ghost",
    children: "Ghost",
  }}
>
  {Template.bind({})}
</Story>

## Semantic

`Button` component has 3 visual style variants and 5 semantic color options

<Story name="Semantic">
  <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
    {Object.values(BUTTON_VARIANTS).map((variant) =>
      Object.values(COLORS).map((color) => (
        <div key={`${variant}-${color}`} style={{ marginBottom: 10 }}>
          <Button variant={variant} color={color} children={color} />
        </div>
      )),
    )}
  </div>
</Story>

## Disabled

<Story
  name="Disabled State"
  args={{
    isDisabled: true,
    children: "Disabled",
  }}
>
  {Template.bind({})}
</Story>

## Loading

<Story
  name="Loading State"
  args={{
    isLoading: true,
    children: "Loading",
    onPress: () => alert("on pressed"),
  }}
>
  {Template.bind({})}
</Story>

## With Icon

<Story
  name="With Icon"
  args={{
    children: "With Icon",
    icon: EmotionHappyLineIcon,
  }}
>
  {Template.bind({})}
</Story>

## Icon Position

<Story
  name="Icon Position - Start"
  args={{
    children: "Icon Start",
    icon: EmotionHappyLineIcon,
  }}
>
  {Template.bind({})}
</Story>

<Story
  name="Icon Position - End"
  args={{
    children: "Icon End",
    icon: EmotionHappyLineIcon,
    iconPosition: "end",
  }}
>
  {Template.bind({})}
</Story>
